<script setup lang="ts">
import { onMounted, ref } from "vue";
import { get, post } from "./../http/axios";

const list1 = ref("");
const list2 = ref("");
const getInfo = () => {
  get("/api/posts/1", { params: { id: 1 } }, { cache: true }).then((res) => {
    list1.value = JSON.stringify(res);
  });
};
const postInfo = () => {
  post("/api/posts", { params: { id: 1 } }, { cache: true }).then((res) => {
    list2.value = JSON.stringify(res);
  });
};

const clearData = () => {
  localStorage.clear()
}

onMounted(() => {});
</script>

<template>
  <div>
    <p>测试接口缓存, 测试之前先运行 `npm run server`</p>
    <p>
      <button @click="getInfo">测试 get 接口</button>
      <span>{{ list1 }}</span>
    </p>
    <p>
      <button @click="postInfo">测试 post 接口</button>
      <span>{{ list2 }}</span>
    </p>
    <p>
      <button @click="clearData">清除接口缓存数据</button>
    </p>
  </div>
</template>

<style></style>
../http/axios
